<template>



    <el-dialog class="abow_dialog"
      title="人员"
      width="80%"
               top="10vh"
      :visible.sync="visible"
               @close="$emit('update:show', false)"
      :show="show">
      <div>
        <Row>
          <div  >
            <Col span="6" class="catogry-div border"   :style="{ 'min-height': tableMinHeight+'px' }">
              <Collapse v-model="serviceVal" accordion  @on-change="changePanel"  :height="tableHeight">
                <Panel name="users" hide-arrow	>
                  人员
                </Panel>
                <Panel name="role" hide-arrow	>
                  角色
                  <p slot="content">
                    <el-tree
                      :data="roleData"
                      :props="roleDefaultProps"
                      @node-click="handleRoleNodeClick"
                    ></el-tree>
                  </p>
                </Panel>
                <Panel name="org" hide-arrow	>
                  组织
                  <p slot="content">
                    <Select v-model="orgModel" style="100%" @on-change="orgDemensionChange">
                      <Option v-for="item in orgDemension" :value="item.code" :key="item.code">{{ item.demName }}</Option>
                    </Select>
                    <br>
                    <el-tree
                      :data="orgData"
                      :props="orgDefaultProps"
                      @node-click="handleOrgNodeClick"
                    ></el-tree>

                  </p>
                </Panel>
                <Panel name="position" hide-arrow	>
                  岗位
                  <p slot="content">

                    <el-tree
                      :data="positionDemension"
                      :props="positionDefaultProps"
                      @node-click="handlePositionNodeClick"
                    ></el-tree>
                  </p>
                </Panel>
              </Collapse>


            </Col>

          </div>

          <Col span="12"  class="no-padding border-bottom border-right boder-margin"      >
            <Table  border    highlight-row ref="currentRowTable" height="450"
                    :columns="tableColumns" :data="tableData" style="padding-left: 10px;padding-top: 10px"></Table>
            <Page   ref="pages"   :total="userTotal" show-elevator  @on-change="changePanelUser" style="margin-top: 3px"/>

          </Col>
          <Col span="5"  class="border-right border" style="padding-left: 10px;margin-left: 10px"  :style="{ 'min-height': tableMinHeight+'px' }">

            <Table border highlight-row ref="showTable" style="padding-top: 10px"
                   height="450"
                   :columns="showTableColumns" :data="showTableData"></Table>
          </Col>
        </Row>

      </div>
      <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmDialog">确 定</el-button>
    <el-button @click="visible = false">取 消</el-button>

  </span>
    </el-dialog>
</template>

<script>
  import {getUser,getRoleTree,getRoleFilter,getDemension,getOrgTree,getOrgFilter,getOrgPost,getPostFilter} from "@/api/uc";

  export default {
    methods: {
      changePanelUser:function(page){
        this.queryForm.page=page;
       var val=  this.activePanel
        if (val=='users') {
          this.getUser();
        }else if(val=='role'){
          getRoleFilter(this.queryForm, this.activiteCode).then((response) => {
            if (response.code==0){
              if (response.code==0){
                this.tableData=response.page.aaData;
                this.userTotal=parseInt(response.page.total);
              }
            }
          })
        }else if(val=='org'){
          getOrgFilter(this.queryForm,this.activiteCode).then((response) => {
            if (response.code==0){
                this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          })

        }else if(val=='position'){
          getPostFilter(this.queryForm,this.activiteCode).then((response) => {
            if (response.code==0){
              if (response.code==0){
                this.tableData=response.page.aaData;
                this.userTotal=parseInt(response.page.total);
              }
            }
          })
        }
      },
      orgDemensionChange:function(data){
        this.getOrgTree(data)
      },
      handleRoleNodeClick:function (data) {
        if (data){
          this.activiteCode=data.code;
        }
        getRoleFilter(this.queryForm,data.code).then((response) => {
          if (response.code==0){
            if (response.code==0){
              this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          }
        })
      },
      handleOrgNodeClick:function (data) {
        this.activiteCode=data.deptCode;
        getOrgFilter(this.queryForm,data.deptCode).then((response) => {
          if (response.code==0){
            if (response.code==0){
              this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          }
        })
      },
      handlePositionNodeClick:function (data) {
        this.activiteCode=data.code;
        getPostFilter(this.queryForm,data.code).then((response) => {
          if (response.code==0){
            if (response.code==0){
              this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          }
        })
      },
      getUser:function(){
        getUser(this.queryForm).then((response) => {
          if (response.code==0){

            this.tableData=response.page.aaData;
            this.userTotal=parseInt(response.page.total);
          }
        })
      },
      getOrgPost:function(){
        getOrgPost(this.queryForm).then((response) => {
          if (response.code==0){
            this.positionDemension=response.data;
          }
        })
      },
      getDemension:function(){
        getDemension(this.queryForm).then((response) => {
          if (response.code==0){
            this.orgDemension=response.data;
            for (var i = 0; i <this.orgDemension.length ; i++) {
              if (this.orgDemension[i].defaultVal){
                this.orgModel=this.orgDemension[i].code;
                this.getOrgTree(this.orgDemension[i].code)
                break
              }
            }
          }



        })
      },
      getRoleTree:function(){
        getRoleTree(this.queryForm).then((response) => {
          if (response.code==0){
            this.roleData=response.data;
          }
        })
      },
      getOrgTree:function(code){
        getOrgTree(code).then((response) => {
          if (response.code==0){
            var tmp=[];
            tmp.push(response.data)
           this.orgData=tmp;
          }
        })
      },
      mount() {
        this.getUser();
      },
      created() {
        this.getUser();
      },
      confirmDialog() {

        if(this.onOk){
          this.visible = false
          this.onOk(this.showTableData);
        }
      },
      changePanel:function (data) {
        if (data.length>0){
          var val=data[0];
          this.activePanel=val
          this.queryForm.page=1
          if (val=='users') {
            //分页初始化为第一页
            this.$nextTick(function(){

              this.$refs['pages'].currentPage = 1;

            })
            this.getUser();
          }else if(val=='role'){
            this.getRoleTree();
          }else if(val=='org'){
            this.getDemension()

          }else if(val=='position'){
            this.getOrgPost()
          }
        }
      }
    },
    data () {
      return {
        visible: this.show,
        roleDefaultProps:{
          children: 'childList',
          label: 'name'
        },
        orgDefaultProps:{
          children: 'children',
          label: 'deptName'
        },
        positionDefaultProps:{
          children: 'children',
          label: 'posName'
        },
        activiteCode:"",
        serviceVal:'',
        activePanel:'',
        tableHeight:420,
        tableMinHeight:484,
        userTotal:0,
        currentChoose:'',
        orgModel:'',
        positionModel:'',
        roleData:[],
        orgData:[],
        positionDemension:[],
        orgDemension:[],
        queryForm: {
          page: 1,
          length: 10,
        },
        showTableColumns:[
          {
            title: '用户名',
            key: 'fullname'
          },
          {
            title: '操作', //
            key: 'status', //
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                  },
                  style: {
                    display: 'flex',
                    'justify-content': 'center',
                  },
                  on: {
                    click: () => {
                     this.showTableData=[];
                    },
                  },
                }, '删除'),
              ]);
            },
          },

        ],

        tableColumns:[
          {
            title: '',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.id;
              let rowData = params.row;
              let flag = false;
              if (this.currentChoose === id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      var showData=[];
                      showData.push(rowData);
                      this.showTableData=showData;
                      self.currentChoose = id;
                    }
                  }
                })
              ])
            }
          },
          {
            title: '工号',
            key: 'userNo'
          },
          {
            title: '用户名',
            key: 'fullname'
          },
          {
            title: '手机号',
            key: 'mobile'
          }
        ],
        tableData:[],
        showTableData:[],
      };
    },
    mount() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      onOk: {    //定义onOK属性
        type: Function
      },
      existData:Array
    },
    watch: {
      show () {
        //分页初始化为第一页
        this.$nextTick(function(){
          this.$refs['pages'].currentPage = 1;
        })
        if (this.show){
        var existData=   this.existData
          if (existData){
            this.currentChoose=""
            this.showTableData=[]
          }
          this.activePanel="users"
          this.getUser();
          //分页初始化为第一页
          this.$nextTick(function(){

            this.$refs['pages'].currentPage = 1;

          })
        }else{
          this.activePanel="";
        }

        this.visible = this.show;
      }
    }
  };
</script>
<style lang="scss">
  .border{
    border: 1px solid lightgrey;
  }
  .border-right {
    border-right: 1px solid #e7eaec;
  }
  .boder-margin {
   margin-left: 10px;
  }
  .border-left {
    border-left: 1px solid #e7eaec;
  }
  .border-bottom {
    border-bottom: 1px solid #e7eaec;
  }
  .no-padding {
    padding: 0 !important;
  }
  .catogry-div {
    padding: 5px 5px 5px 20px;
  }
  .split-pane{
    border: 1px solid #dcdee2;
  }
</style>
